<template>
	<div>
		<div class="main_header">
			<div style="display: flex;">
			<div style="margin-left: 30px;font-size: 1.275rem;">试卷名：{{TestRecords.testPaperName}}</div>
			<div style="margin-left: 30px;font-size: 1.275rem;">得分：<span style="color: red;">{{TestRecords.userScore}}分</span></div>
			</div>
			<div style="margin-left: 30px;font-size: 1.275rem;margin-right: 1.875rem;"><el-button type="primary" round style="background-color: #03d3bd;border: none;">返回</el-button></div>	
		</div>
		<div class="exam">
			<div class="title" style="position: relative;">
				<div>
					<p style="font-size: 1.1875rem;">答题卡</p>
				</div>
				<div>
					
					<span v-for="(item, idx) in questions" :key="idx" @click="pages(idx)" style="margin-top: 10px;" :class="{noactive:item.result==0,deactive:item.result==1}" >{{idx+1}}</span>
					
					
				</div>
				<div class="Bottom" style="text-align: center;display: flex;align-items: center;">
					<span class="deactive" style="height: 1.875rem;width: 1.875rem;margin-left: 1.25rem;"></span>
					正确
					<span class="noactive" style="height: 1.875rem;width: 1.875rem;margin-left: 1.25rem;"></span>
					错误
					<!-- <span style="width: 30px;height: 30px;margin-left: 0.625rem;background-color: #ffaa00;"></span>
					收藏 -->
				</div>
			</div>
			<div class="topic">
				<div class="topic_main">
					<div>题目</div>
					<!-- <div>共{{questions.length}}题</div> -->
				</div>

				<div class="question" v-for="(item, idx) in questions" :key="idx">
					<p>{{ `${idx+1}.${item.question.content}` }}</p>
					<div>
					<el-radio-group  v-if="item.question.topicId==1">
						<el-radio :label="Ite.id"   v-for="(Ite,index) in item.question.optionsList" :key="index">{{letter[index]}}.{{ Ite.content }}</el-radio>
						
					</el-radio-group>
					<!-- <el-checkbox-group  style="display: flex;flex-direction: column;" v-if="item.question.topicId==2">
					    <el-checkbox :label="Ite.id"   v-for="(Ite,index) in item.question.optionsList" style="margin-top: 1.25rem;" >{{Ite.id}}.{{ Ite.content }}</el-checkbox>
					 </el-checkbox-group> -->
					</div>
					<div>查看</div>
					<ul style="background-color: #f9f9f9;">
						<li style="display: flex;justify-content: space-between;">
							<div>
							结果：<span :class="item.result? 'yes' : 'no'">{{
						  item.result ? "正确" : "错误"
						}}</span></div>
						 
						</li>
						<li>标答:{{item.question.answer}}</li>
						<li>我的答案:{{item.userAnswer}}</li>
						<li>得分：{{item.question.score }}</li>
						<li>
							难度：<el-rate v-model="item.question.difficulty" :max="5" :texts="texts" show-text disabled="disabled">
							</el-rate>
						</li>
						<!-- <li>解析：{{item.question.parsing }}</li> -->
					</ul>
				</div>
			</div>
			<!-- <div class="left">
				<div>考试时间</div>
				<div style="color: red;margin-bottom: 2.5rem;">{{TestRecords.spendTime}}</div>
				<hr style="margin-top: 10px;" color="#ececec" size="1">
				
			</div> -->
		</div>
	</div>

</template>

<script>
	import {TestManager} from "../../request/test.js"
	 const cityOptions = ['上海', '北京', '广州', '深圳'];
	export default {
		
		data() {
			return {
				texts: ["简单", "一般", "困难"],
				js: "",
				star: false,
				isShow: true,
				page: 1,
				exam: {
					num: [],
				},
				questions:[],
				TestRecords:[],
				checkedCities: ['上海', '北京'],
				cities: cityOptions,
				letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
			};
		},
		created() {
		
			this.getTestRecordsInfo();
		},
		methods:{
			//页面的跳转
			pages(id) {
			  document.getElementsByClassName("question")[id].scrollIntoView();
			},
			getTestRecordsInfo()
			{
				var parmas={
					id:localStorage.getItem("test_record")
				}
				TestManager.getTestRecordsInfo(this.qs.stringify(parmas)).then(e=>{
					console.log(e.data.data);
					this.questions=e.data.data.questions;
					this.TestRecords=e.data.data.testRecord;
				})
			}
		}
	};
</script>

<style scoped>
	.topic_main {
		display: flex;
		justify-content: space-between;
	}

	.main_header {
		height: 5.5rem;
		margin-left: 2.25rem;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: white;
	}

	.exam {
		width: 100vw;
		height: 100vh;
		background-color: #eff3f7;
		display: flex;
		justify-content: center;

	}

	.exam .title,
	.exam .left {
		margin: 50px 20px;
		height: 80%;
		background-color: #fff;
	}
	.exam .left{
		height: 30%;
	}

	.exam .topic {
		margin-top: 3.125rem;
		height: 80%;
		background-color: #fff;
	}

	.title {
		width: 15%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.title div {
		width: 100%;
		/* height: 40px; */
		border-bottom: 1px solid #ebebeb;
		margin-bottom: 20px;
		padding-bottom: 10px;
		display: flex;
		flex-wrap: wrap;
	}

	.title div:nth-child(2) {
		display: flex;
		height: 100px;
		flex-wrap: wrap;
	}
	/* .title div:nth-child(2) span{
		width: 6.25rem;
	} */

	.title div p {
		display: block;
	}

	/* .title div>span {
		
	} */
	
	.noactive{
		display: block;
		background-color: #ffaa00;
		color: #ffffff;
		width: 40px;
		height: 30px;
		margin-right: 10px;
		text-align: center;
		line-height: 30px;
		border-radius: 5px;
		cursor: pointer;
		margin-top: 10px;
	}	
	.deactive{
		background-color: #03d3bd;
		margin-top: 10px;
		display: block;
		/* background-color: #ffaa00; */
		color: #ffffff;
		width: 40px;
		height: 30px;
		margin-right: 10px;
		text-align: center;
		line-height: 30px;
		border-radius: 5px;
		cursor: pointer;
	}

	.exam .topic {
		overflow: scroll;
		scrollbar-width: none;
	}

	.exam .topic::-webkit-scrollbar {
		width: 0;
	}

	.title {
		width: 15%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20px;
	}

	.topic {
		width: 65%;
		padding: 20px;
		display: flex;
		flex-direction: column;
		position: relative;
	}

	.topic>span {
		display: block;
		height: 40px;
		line-height: 40px;
		font-weight: 500;
		font-size: 25px;
	}

	.topic .question {
		flex: 5;
		display: flex;
		flex-direction: column;
		padding: 50px;
		border-bottom: 1px solid #dfdfdf;
	}

	.topic .question .el-radio-group {
		display: flex;
		flex-direction: column;
	}

	.el-radio-group .el-radio {
		height: 40px;
		line-height: 40px;
	}

	.question li {
		list-style: none;
		display: block;
		height: 40px;
		margin-left: 1.875rem;
		display: flex;
		align-items: center;
	}

	.question span {
		display: inline-block;
		height: 20px;
		padding: 2px 5px;
		border-radius: 3px;
		border: 1px solid #fdf6ec;
	}

	.question .yes {
		background: #f0f9eb;
		color: #97d3bf;
	}

	.question .no {
		background-color: #fdf6ec;
		color: #e7ac95;
	}

	.left {
		margin-top: 3.25rem;
		background-color: #ffffff;
		width: 100px;
		text-align: center;
	}

	.left div {
		margin-top: 0.875rem;
	}

	.Bottom {
		position: absolute;
		bottom: 0;
		overflow: hidden;
		display: flex;
	}
</style>
